<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<!-- <head th:replace="base :: head(~{::title}, ~{::link}, ~{::script})">  -->
<head>
 	<base th:href="@{/}">
	<title>demo测试样例页面</title>
	<meta charset="UTF-8" />
	
	<link rel="stylesheet" th:href="@{/common/tailwind/tailwind.min.css}" />
	<link rel="stylesheet" th:href="@{/common/flowbite/flowbite.min.css}" />
	<link rel="stylesheet" th:href="@{/common/jedate/jedate.css}" />
	
	<script type="text/javascript" th:src="@{/common/flowbite/flowbite.min.js}" ></script>
	<script type="text/javascript" th:src="@{/common/jedate/jedate.js}"></script>
	<script type="text/javascript" th:src="@{/common/jquery/3.6.3/jquery.min.js}"></script>
	<script type="text/javascript" th:src="@{/common/jquery/jquery.extend.js}"></script>
	<script type="text/javascript" th:src="@{/common/jsvalidate/Validate.js}"></script>
	<script type="text/javascript" th:src="@{/js/area.js}"></script>
</head>

<body class="container mx-auto m-12 p-12">
	<header th:replace="~{base :: header}"></header>

    <div class="content">
    
	<div id="popup" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50  md:inset-0 h-modal md:h-full">
	  <div class="relative p-4  max-w-lg h-full md:h-auto">
	      <div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 md:p-8">
	          <div class="mb-4 text-sm font-light text-red-500 dark:text-gray-400">
	              <h3 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">警告</h3>
	              <p id="errs"></p>
	          </div>
	          <div class="justify-between items-center pt-0 space-y-4 sm:flex sm:space-y-0">
	              <div class="items-center space-y-4 sm:space-x-4 sm:flex sm:space-y-0">
	                  <button id="popup-confirm" type="button"  class="py-2 px-4  text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 sm:w-auto hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">知道了</button>
	              </div>
	          </div>
	      </div>
	  </div>
	</div>


	<form action="demo/save" method="post" id="addForm">
	
		<div class="mb-6">
			<label for="username" class="w-48 mb-2 text-sm font-medium text-gray-900 dark:text-white">名字：</label> 
			<input th:value="${dto.username}" name="username" id="username" type="text" class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required/> 
			<font th:errors="${dto.username}" th:if="${#fields.hasErrors('dto.username')}" color="red" >借误消息</font>
		</div>
		<div class="mb-6">
			<label for="password" class="w-12 mb-2 text-sm font-medium text-gray-900 dark:text-white" >密码：</label> 
			<input th:value="${dto.username}"  type="text" name="password" id="password" class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required/> 
			<font th:errors="${dto.username}" th:if="${#fields.hasErrors('dto.username')}" color="red" >借误消息</font>
		</div>
		<div class="mb-6">
			<label for="beginTime" class="w-12 mb-2 text-sm font-medium text-gray-900 dark:text-white">日期：</label>
			<input type="text" name="beginTime" id="beginTime" th:value="${#dates.format(dto.beginTime,'yyyy-MM-dd')}" placeholder="YYYY-MM-DD" class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" readonly="readonly" />
			<label for="endTime" class="w-12 mb-2 text-sm font-medium text-gray-900 dark:text-white"> 农历 </label>
			<input type="text" name="endTime" id="endTime" th:value="${dto.endTime}" placeholder="YYYY-MM-DD hh:mm:ss" class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" readonly="readonly" />
		</div>
		<div class="mb-6">
			<label for="" class="w-12 mb-2 text-sm font-medium text-gray-900 dark:text-white">地址：</label>
			<select id="province" name="province" onchange="showCity()" class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
				<option value="0">=请选择省份=</option>
			</select>
			<select id="city" name="city" onchange="showCountry()" class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
				<option value="0">=请选择城市=</option>
			</select>
			<select id="country" name="country" class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
				<option value="0">=请选择县区=</option>
			</select> 
			<input type="hidden" id="abc" th:value="|${dto.province}-${dto.city}-${dto.country}|" class="w-48 border py-2 px-3 text-grey-darkest">
		</div>
		<div class="mb-6">
			<label for="" class="w-12 mb-2 text-sm font-medium text-gray-900 dark:text-white">省份：</label> 
			<select id="aaae" name="aaa" class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" >
				<option value="0">请选择</option>
				<option th:each="el : ${@areaCache.provinceList}"
					th:selected="${dto.province eq el.id}"
					th:value="${el.id}"
					th:text="${el.text}"></option>
			</select>
		</div>
		<div class="mb-6">
			<label for="" class="w-12 mb-2 text-sm font-medium text-gray-900 dark:text-white">状态：</label> 
			<select id="demotype" name="demotype" class="w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" >
				<option value="0">请选择</option>
				<option th:each="el : ${@dictCache.DictList.AuthStatusList}"
					th:selected="${dto.demotype eq el.code}" 
					th:value="${el.code}"
					th:text="${el.text}"></option>
			</select>
		</div>
		<div class="mb-6">
			<label for="token" class="w-12 mb-2 text-sm font-medium text-gray-900 dark:text-white" >token：</label> 
			<input th:value="${session.token}" name="token" id="token" type="text" class="w-96 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
		</div>
		
        <div class="flex flex-row mb-4" >spring bean方法调用@:  ${@util.upper('hello world')}====[[${@util.upper('hello world')}]]</div>
		<div class="flex flex-row mb-4 items-center">静态方法调用用T+全路径T：${T(com.lucky.common.config.thymeleaf.utils.TestUtil).test()}====[[
            ${T(com.lucky.common.config.thymeleaf.utils.TestUtil).test()} ]]</div>
		<div class="flex flex-row mb-4 items-center">页面直接显示变量方式[ [${dto.demotype}]]或者[ (${dto.demotype})]等价  text([[${dto.demotype}]])和utext([(${dto.demotype})])的关系</div>
		<div class="flex flex-row mb-4" >dialect-显示汉化字段样例#:     ${#area.areaMap[dto.province].text}====[[${#area.areaMap[dto.province].text}]]</div>
		<div class="flex flex-row mb-4" >dialect-显示汉化字段样例#:     ${#dict.DictMapDemoType['2']}====[[${#dict.DictMap.DemoType['2']}]]</div>
		<div class="flex flex-row mb-4" >spring-显示汉化字段样例@:     ${@dictCache.DictMap.DemoType[dto.demotype]}====[[${@dictCache.DictMap.DemoType[dto.demotype]}]]</div>
		<div class="flex flex-row mb-4" >application-显示汉化字段样例:     ${application.DictMap.DemoType['1']}====[(${application.DictMap.DemoType['1']})]</div>
	    <div class="flex flex-row mb-4" >图片显示方法,传入一个路径 img th:src="${filePath}"  </div>
		<div class="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg dark:bg-gray-800 dark:text-blue-400" role="alert">
			<span class="font-medium">提示信息!</span> Change a few things up and try submitting again.
			<ul   id="err" th:if="${#fields.hasErrors('dto.*')}">
	        <li th:each="err:${#fields.errors('dto.*')}" th:text="${err}" style="color: red"></li>
	    </ul>
		</div>
		<div class="flex items-start mb-6">
	    <div class="flex items-center h-5">
	      <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required>
	    </div>
	    <label for="remember" class="w-12 ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">记住我</label>
  		</div>
		<button type="submit" class="w-24 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">提交</button>
		<button type="submit" class="w-24 text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">Dark</button>
	</form>
    </div>
    <footer th:replace="~{base :: footer}"></footer>
    
</body>

<script>
	$(document).ready(function(){
		$("form").submit(function(e){
			var ret = check();
			if(ret!==true){
				var errMsg = JSON.stringify(ret)//json对象转换为字符换
						.slice(1,-1)//删除前后{}
						.replace(/"\w+":/gi, "")//删除表单name，“username：”，gi全乎忽略大写小
						.replace(/"/g, "")//替换双引号
						.replace(new RegExp(",", "g"), "<br/>");//替换到逗号，并换行
						
				$('#errs').html(errMsg);	
				const em = new Modal($("#popup")[0], { placement: 'center' }); em.show();
				$("#popup-confirm").click(() => em.hide());		
				return false;
			}
		});
		
		jeDate("#beginTime",{
	        onClose: false,
	        minDate: "1900-01-01",              
	        maxDate: "2099-12-31",
	        format: "YYYY-MM-DD",
	        isToday: true,    
	        festival:true, 
	        theme: {bgcolor:"#D91600", pnColor:"#FF6653"}
	    });  
	    jeDate("#endTime",{
	    	//skinCell:"jedateblue",                      //日期风格样式，默认蓝色
	        //format:"YYYY-MM-DD hh:mm:ss",               //日期格式
	        //minDate:"1900-01-01 00:00:00",              //最小日期 或者 "1900-01-01" 或者 "10:30:25"
	        //maxDate:"2099-12-31 23:59:59",              //最大日期 或者 "2099-12-31" 或者 "16:35:25"
	        //isShow:false,                                //是否显示为固定日历，为false的时候固定显示
	        //multiPane:true,                             //是否为双面板，为false是展示双面板
	        //onClose:true,                               //是否为选中日期后关闭弹层，为false时选中日期后关闭弹层
	        //range:null,                                 //如果不为空，则会进行区域选择，例如 " 至 "，" ~ "，" To "
	        //trigger:"click",                            //是否为内部触发事件，默认为内部触发事件
	        //position:[],                                //自定义日期弹层的偏移位置，长度为0，弹层自动查找位置
	        //valiDate:[],                                //有效日期与非有效日期，例如 ["0[4-7]$,1[1-5]$,2[58]$",true]
	        //isinitVal:false,                            //是否初始化时间，默认不初始化时间
	        //initDate:{},                                //初始化时间，加减 天 时 分
	        //isTime:true,                                //是否开启时间选择
	       // isClear:true,                               //是否显示清空
	        //isToday:true,                               //是否显示今天或本月
	        //festival:false,                             //是否显示农历节日
	       // fixed:true,                                 //是否静止定位，为true时定位在输入框，为false时居中定位
	        //zIndex:2099,                                //弹出层的层级高度
	        //marks:null,                                 //给日期做标注
	        //clearfun:function(elem, val) {},            //清除日期后的回调, elem当前输入框ID, val当前选择的值
	       // donefun:function(obj) {},                   //点击确定后的回调,obj包含{ elem当前输入框ID, val当前选择的值, date当前的日期值}
	       // success:function(elem) {},                  //层弹出后的成功回调方法, elem当前输入框ID       
	       
	    }); 
	});
	function check(){
		var rule = {
			'username': '@姓名|require|min:4|max:8',
			'password': '@密码|require|min:4|max:8',
			'token': '@重复提交|token'
		};
		var data = $('#addForm').serializeJson();
		var result = Validate.check(rule,data,true);
		
		
		return result;
	
		/* 
		var data = {
			'username': $('#username').val(),
			'password': $('#password').val(),
			'token':    $('#token').val()
		};
		*/
		/** 验证单个错误 */
		//result = Validate.check('@昵称|chinese', $('#username').val());
		//console.log(result);
		// output: 昵称只能是中文
	}
	 
</script>
</html>
